<script setup>
import { ColorPicker, parseColor } from "@ark-ui/vue/color-picker";
import { PipetteIcon } from "lucide-vue-next";

const presets = [
  "#e74c3c",
  "#f1c40f",
  "#2ecc71",
  "#1abc9c",
  "#3498db",
  "#4a90e2",
  "#5b67d1",
  "#663399",
  "#9b59b6",
  "#e91e63",
];
</script>

<template>
  <ColorPicker.Root :default-value="parseColor('#000000')" inline>
    <ColorPicker.Content
      class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-lg space-y-4 z-50 w-80"
    >
      <!-- Color Area -->
      <ColorPicker.Area class="w-full h-36 rounded-md overflow-hidden relative">
        <ColorPicker.AreaBackground class="w-full h-full" />
        <ColorPicker.AreaThumb
          class="absolute w-3 h-3 bg-white border-2 border-black rounded-full shadow-xs -translate-x-1/2 -translate-y-1/2"
        />
      </ColorPicker.Area>

      <!-- Eye Dropper and Sliders -->
      <div class="flex items-center gap-3">
        <ColorPicker.EyeDropperTrigger
          class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
        >
          <PipetteIcon class="w-4 h-4" />
        </ColorPicker.EyeDropperTrigger>

        <div class="flex-1 space-y-2">
          <!-- Hue Slider -->
          <ColorPicker.ChannelSlider
            channel="hue"
            class="relative w-full h-3 rounded-full overflow-hidden"
          >
            <ColorPicker.ChannelSliderTrack
              class="w-full h-full bg-linear-to-r from-red-500 via-yellow-500 via-green-500 via-cyan-500 via-blue-500 via-purple-500 to-red-500"
            />
            <ColorPicker.ChannelSliderThumb
              class="absolute top-1/2 w-3 h-3 bg-white border-2 border-black rounded-full shadow-xs -translate-y-1/2 -translate-x-1/2"
            />
          </ColorPicker.ChannelSlider>

          <!-- Alpha Slider -->
          <ColorPicker.ChannelSlider
            channel="alpha"
            class="relative w-full h-3 rounded-full overflow-hidden"
          >
            <ColorPicker.TransparencyGrid class="w-full h-full [--size:8px]" />
            <ColorPicker.ChannelSliderTrack class="w-full h-full" />
            <ColorPicker.ChannelSliderThumb
              class="absolute top-1/2 w-3 h-3 bg-white border-2 border-black rounded-full shadow-xs -translate-y-1/2 -translate-x-1/2"
            />
          </ColorPicker.ChannelSlider>
        </div>
      </div>

      <!-- Input Fields -->
      <div class="flex gap-2">
        <ColorPicker.ChannelInput
          channel="hex"
          class="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
        <ColorPicker.ChannelInput
          channel="alpha"
          class="w-16 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
      </div>

      <!-- Saved Colors -->
      <div class="space-y-2">
        <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">
          Saved Colors
        </h4>
        <ColorPicker.SwatchGroup class="grid grid-cols-7 gap-2">
          <ColorPicker.SwatchTrigger
            v-for="color in presets"
            :key="color"
            :value="color"
          >
            <ColorPicker.Swatch
              :value="color"
              class="w-8 h-8 rounded-md border border-gray-300 dark:border-gray-600 cursor-pointer hover:scale-110 transition-transform"
            >
              <ColorPicker.SwatchIndicator
                class="w-full h-full flex items-center justify-center text-white text-xs font-bold"
              >
                ✓
              </ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        </ColorPicker.SwatchGroup>
      </div>
    </ColorPicker.Content>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
</template>
